/* eslint-disable jsx-a11y/alt-text */
import React, { Component, createRef } from 'react'
import {connect} from 'react-redux'
import Axios from 'axios';
import './index.scss'

class Menu extends Component {
    constructor(props){
        super(props)
        this.state={
            swiper:[],
            curindex:0,
            start:false, // 是否开始播放
            singIndex:0, // 歌曲下标
            endTime:'00:00', // 歌曲总时长
            startTime:'00:00', // 歌曲当前播放时长
            jingyin:false, // 静音开关
            playType:0,
            musicArr:[
                {
                    title: '第三十八年夏至',
                    author: '河图',
                    img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.improve-yourmemory.com%2Fpic%2Fdb4b53260a52a167fdd4bb2cbf1749c6-2.jpg&refer=http%3A%2F%2Fimg.improve-yourmemory.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628418510&t=b3c8e622bb596510be5360d55c4f3093',
                    song:'music.mp3'
                },
                {
                    title: '断桥残雪',
                    author: '许嵩',
                    img:'https://img2.baidu.com/it/u=2551827429,27985697&fm=26&fmt=auto&gp=0.jpg',
                    song:'断桥残雪.mp3'
                },
                {
                    title: '大风吹',
                    author: '王赫野',
                    img:'https://img0.baidu.com/it/u=2063908614,209527620&fm=15&fmt=auto&gp=0.jpg',
                    song:'大风吹.mp3'
                },
                {
                    title: '如花',
                    author: '河图',
                    img:'https://img2.baidu.com/it/u=4227302094,348885873&fm=26&fmt=auto&gp=0.jpg',
                    song:'如花.mp3'
                },
                {
                    title: '麻雀',
                    author: '李荣浩',
                    img:'https://img1.baidu.com/it/u=2027235392,3153490524&fm=26&fmt=auto&gp=0.jpg',
                    song:'麻雀.mp3'
                }
            ],
        }
        this.aud=createRef()
    }
    componentDidMount(){
        Axios.get('/list').then(res=>{
          this.props.setlist(res.data.list)
        })
    }

    // 转时间格式
    pad(val) {
        const sVal = Math.floor(val); // 舍弃毫秒
        if (sVal < 10) return `0${sVal}`;
        return Number.isNaN(sVal) ? '00' : sVal.toString();
    }
    timeParse(musicTime,type) {
        const min = Math.floor(musicTime / 60);
        const secVal = musicTime - min * 60;
        type==='end'?this.setState({
            endTime: `${this.pad(min)}:${this.pad(secVal)}`
        }):this.setState({
            startTime: `${this.pad(min)}:${this.pad(secVal)}`
        })
    }

    // 播放/暂停
    paly(staus){
        let aud= document.getElementById('audio')
        this.setState({start:staus},()=>{
            if(this.state.start){
                aud.play();
                document.getElementById('poster').setAttribute('style',`animation-play-state: running`)
                return
            }
            document.getElementById('poster').setAttribute('style',`animation-play-state: paused`)
            aud.pause()
        })
    }

    // 上一首/下一首
    changeOver(type){
        let {singIndex,musicArr} = this.state
        if(type==='pre'){
            this.setState({start:true,singIndex: singIndex - 1 < 0 ? musicArr.length - 1 : singIndex - 1 },()=>{
                this.paly(true);
            })
            return
        }
        this.setState({start:true,singIndex: singIndex + 1 === musicArr.length ? 0 : singIndex + 1 },()=>{
            this.paly(true);
        })
    }

    // 是否静音
    mute(){
       this.setState({jingyin:!this.state.jingyin},()=>{
            this.aud.current.muted=this.state.jingyin
       }) 
    }

    // 获取结束时间
    getEndTime(){
        if(document.getElementById('audio')===this.aud.current) return
        this.aud.current= document.getElementById('audio')
        this.aud.current.addEventListener("loadedmetadata", ()=>{
            this.timeParse(this.aud.current.duration,'end')
        });
        this.aud.current.addEventListener('timeupdate',()=>{
            this.timeParse(this.aud.current.currentTime,'start')
            let barWid=document.getElementById('bar').offsetWidth
            let du=this.aud.current.currentTime/this.aud.current.duration
            let buoyWid=du * barWid < 8? '8px' : du * barWid
            document.getElementById('plan-bar').setAttribute('style',`width:${du * barWid}px`)
            document.getElementById('buoy').setAttribute('style',`left:${buoyWid}px`)
        })
    }

    // 改变播放方式
    changePlayType(){
        this.setState({playType:8})
    }

    render() {
        let { singIndex, musicArr, start, startTime, endTime, jingyin, playType } = this.state
        const icon= playType ===0 ?'https://img2.baidu.com/it/u=3082466911,1523243933&fm=26&fmt=auto&gp=0.jpg':playType===8?'https://img0.baidu.com/it/u=278055281,1687218412&fm=26&fmt=auto&gp=0.jpg':'https://img0.baidu.com/it/u=4246338377,649638764&fm=26&fmt=auto&gp=0.jpg'
        return (
            <div className="menu-wrap">
                <div className='head'>这里是首页</div>
                {/* 海报背景 */}
                <div className="bg" style={{backgroundImage:`url(${musicArr[singIndex].img})`}}></div>
                {/* 乐碟 */}
                <div className="plate">
                    <img src="tool.jpg" alt="" className={start?"tool":'tool active'} />
                    <img id='poster' className={start?'poster active':'poster'} src={musicArr[singIndex].img} alt="" />
                </div>
                {/* 音频加载器 */}
                <audio id="audio" ref={()=>this.getEndTime()} src={musicArr[singIndex].song} loop preload="true" ></audio>
                {/* 音乐信息 */}
                <div className="music-info control-area">
                    <p>歌名：{musicArr[singIndex].title}</p>
                    <p>歌手：{musicArr[singIndex].author}</p>
                </div>
                {/* 进度条 */}
                <div className="progress">
                    <p>{startTime}</p>
                    <div className='bar' id='bar'><p className="plan-bar" id='plan-bar'>
                        <img className="buoy" id="buoy" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fali1.rabbitpre.com%2F0d3a6606-eea2-4e7f-9d14-c4f00dc68cb2.gif&refer=http%3A%2F%2Fali1.rabbitpre.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628676890&t=da12a988e93f229fa76895b80127bdab" alt="" />
                    </p></div>
                    <p>{endTime}</p>
                </div>
                {/* 用户控件区 */}
                <div className="control-area">
                    <img onClick={()=>this.changePlayType()} className='btn' src={icon} alt="" />
                    <img src="pre.jpg" alt="" className="pre" onClick={()=>{this.changeOver("pre")}}/>
                    <img src={!start? 'pause.jpg' : 'start.jpg'} onClick={()=>this.paly(!this.state.start)} />
                    <img src="next.jpg" alt="" className="pre" onClick={()=>{this.changeOver('next')}}/>
                    <img onClick={()=>this.mute()} className='btn' src={jingyin?'https://img1.baidu.com/it/u=2114574244,2549990662&fm=26&fmt=auto&gp=0.jpg':"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic2%2Fcover%2F00%2F43%2F50%2F5812141cbe936_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628761269&t=52c15c1bd7db2f9d969bc482be765635"} alt="" />
                </div>
            </div>
        )
    }
}
let mapState=(state)=>{
    return {
    }
}
let mapDispatch=(dispatch)=>{
    return {
        setlist(list){
            dispatch({
                type:'SET_LIST',
                list
            })
        }
    }
}
export default connect( mapState,mapDispatch )(Menu)